<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>建筑信息</title>
		<link rel="stylesheet" type="text/css" href="../css/vue.css"/>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<link rel="stylesheet" type="text/css" href="../css/computingEquipment.css"/>
	</head>
	<body>
		<!--公共头部 start-->
		<div class="commonHead">
			<div class="commonHeadLeft">
				<a href="javascript:void(0);"><img src="../img/indexLogo.png" class="houseLogo"/></a>
			</div>
			<div class="commonHeadCenter">
				<ul>
					<li>
						<a class="active">项目圈</a>
					</li>
					<li>
						<a>材料数据库</a>
					</li>
					<li>
						<a>计算工具</a>
					</li>
					<li class="clear"></li>
				</ul>
			</div>
			<div class="commonHeadRight">
				<div class="infoCenter">
					<a href="javascript:void(0);">
						<span class="iconfont-tcl">&#xe643;</span>
						<span class="infoCenterText">消息中心</span>
						<span class="remindCircle"></span>
					</a>
				</div>
				<div class="loginInfo">
					<el-dropdown trigger="click">
						<span class="el-dropdown-link">
						    Kdd<i class="el-icon-caret-bottom el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
						    <el-dropdown-item>账号设置</el-dropdown-item>
						    <el-dropdown-item>退出</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
				<div class="clear"></div>
			</div>
			<div class="clear"></div>
		</div>
		<!--公共头部 end-->
		
		<!--内容 start-->
		<div class="computedContent">

			
			<!--项目圈内容 start-->
			<div class="buildingInfo">
				<div class="projectBox wayDesign1StepStatusBox">
					<div class="stepStatus">
						<div class="step">
							<div class="stepDec active">
								<div class="stepNum">1</div>
								<div class="stepName">建筑信息</div>
							</div>
							<div class="stepLine">
								<div class="prepareLine"></div>
								<div class="finishLine hidden"></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="step">
							<div class="stepDec">
								<div class="stepNum">2</div>
								<div class="stepName">控制目标</div>
							</div>
							<div class="stepLine">
								<div class="prepareLine "></div>
								<div class="finishLine hidden"></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="step">
							<div class="stepDec">
								<div class="stepNum">3</div>
								<div class="stepName">源头设置</div>
							</div>
							<div class="stepLine">
								<div class="prepareLine"></div>
								<div class="finishLine hidden"></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="step">
							<div class="stepDec">
								<div class="stepNum">4</div>
								<div class="stepName">时间设置</div>
							</div>
							<div class="stepLine">
								<div class="prepareLine"></div>
								<div class="finishLine hidden"></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="step">
							<div class="stepDec">
								<div class="stepNum">5</div>
								<div class="stepName">通风设置</div>
							</div>
							<div class="stepLine">
								<div class="prepareLine"></div>
								<div class="finishLine hidden"></div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="step">
							<div class="stepDec">
								<div class="stepNum">6</div>
								<div class="stepName">计算结果</div>
							</div>
							<div class="clear"></div>
						</div>
						<div class="clear"></div>
					</div>
				</div>
				
				
				<div class="projectBox updateImgBox">
					<div class="myProject">
						<div class="buildNewProject">
							<div class="newProjectForm">
								<div class="selectBox">
									<label>所在区域</label>
									<div class="shortSelect">
										<template>
											<el-select placeholder="省" v-model="province">
											    <el-option
											      	v-for="province in provinces"
											      	:label="province.label"
											      	:value="province.value"
											        :key="province">
											    </el-option>
											</el-select>
										</template>
									</div>
									<div class="shortSelect">
										<template>
											<el-select placeholder="市"  v-model="city">
											    <el-option
											      v-for="city in cities"
											      :label="city.label"
											      :value="city.value"
											      :key="city">
											    </el-option>
											</el-select>
										</template>
									</div>
									<div class="clear"></div>
								</div>
								<div class="inputBox">
									<label>工程名称</label>
									<div class="longInput">
										<input type="text"/>
									</div>
									<div class="clear"></div>
								</div>
								<div class="selectBox">
									<label>建筑类型</label>
									<div class="longSelect">
										<template>
											<el-select placeholder="选择类型" v-model="buildingType">
											    <el-option
											      v-for="buildingType in buildingTypes"
											      :label="buildingType.label"
											      :value="buildingType.value"
											      :key="buildingType">
											    </el-option>
											</el-select>
										</template>
									</div>
									<div class="clear"></div>
								</div>
								<div class="inputBox">
									<label>小区名称</label>
									<div class="longInput">
										<input type="text"/>
									</div>
									<div class="clear"></div>
								</div>
								<div class="selectBox">
									<label>小区户型</label>
									<div class="longSelect">
										<template>
											<el-select placeholder="选择类型" v-model="quartersType">
											    <el-option
											      v-for="quartersType in quartersTypes"
											      :label="quartersType.label"
											      :value="quartersType.value"
											      :key="quartersType">
											    </el-option>
											</el-select>
										</template>
									</div>
									<div class="clear"></div>
								</div>
								<div class="inputBox">
									<label>建筑面积</label>
									<div class="longInput">
										<input type="text"/>
									</div>
									<div class="clear"></div>
								</div>
								<div class="inputBox">
									<label>建筑层高</label>
									<div class="longInput">
										<input type="text"/>
									</div>
									<div class="clear"></div>
								</div>
							</div>
						</div>
					</div>
					
					    
					
					<div class="projectBoxTop pBT" style="">
						<span class="projectBoxName">户型图</span>
						<button class="updateImgBtn">上传户型图</button>
						<div class="clear"></div>
					</div>
					<div class="imgTypes">
						<div class="imgType active">
							<img src="../img/imgtype.jpg" class="wid100"/>
						</div>
						<div class="imgType">
							<img src="../img/imgtype.jpg" class="wid100"/>
						</div>
						<div class="imgType">
							<img src="../img/imgtype.jpg" class="wid100"/>
						</div>
						<div class="imgType">
							<img src="../img/imgtype.jpg" class="wid100"/>
						</div>
						<div class="imgType">
							<img src="../img/imgtype.jpg" class="wid100"/>
						</div>
						<div class="clear"></div>
					</div>
					<div class="ImgControlBtn">
						<button class="downModel">模板下载</button>
						<button class="importData">批量导入数据</button>
					</div>
					<div class="imgList">
						<ul>
							<li class="listDec">
								<div>序号</div>
								<div>房间功能</div>
								<div>房间面积(m²)</div>
								<div>操作</div>
								<div class="clear"></div>
							</li>
							<li class="memberDec">
								<div>01</div>
								<div>
									<input type="text" class="memberDecInput"/>
								</div>
								<div>
									<input type="text" class="memberDecInput"/>
								</div>
								<div>
									<a href="javascript:void(0);" class="delete">删除</a>
								</div>
							</li>
						</ul>
						<div class="addLine">
							<a href="javascript:void(0);">
								<span class="iconfont-tcl">&#xe625;</span>
								<span>添加一行</span>
							</a>
						</div>
						<button class="nextBtn greenLargerBtn">下一步</button>
					</div>
				</div>	
				
			</div>
			<!--项目圈内容 end-->
		</div>
		<!--内容 end-->
		
	</body>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" src="../js/vueComponent.js"></script>
	<script type="text/javascript" src="../js/component.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			//获取content最小高度
			var computedContentMinHeight = $(window).innerHeight() - 60;
			$('.computedContent').css('min-height',computedContentMinHeight + 'px');
		
			//户型图选择
			$('.imgType').each(function(index){
				$(this).click(function(){
					$('.imgType').removeClass('active').eq(index).addClass('active');
				});
			});
		
			//添加一行
			$('.addLine a').click(function(){
				var liText = "<li class='memberDec'><div>01</div><div><input type='text' class='memberDecInput'/></div><div><input type='text' class='memberDecInput'/></div><div><a href='javascript:void(0);' class='delete'>删除</a></div></li>";
				$('.imgList ul').append(liText);
			});
			//删除
			$(document).on('click','.delete',function(){
				$(this).closest('.memberDec').remove();
			});
		});
		
		new Vue({
			el:'.loginInfo'
		});
		
		new Vue({
			el:'.myProject',
			data:function(){
				return {
					provinces: [{
			          value: '选项1',
			          label: '广东省'
			        }, {
			          value: '选项2',
			          label: '广西省'
			        }, {
			          value: '选项3',
			          label: '福建省'
			        }, {
			          value: '选项4',
			          label: '海南省'
			        }],
			        province:'',
					cities: [{
			          value: '选项1',
			          label: '广州市'
			        }, {
			          value: '选项2',
			          label: '深圳市'
			        }, {
			          value: '选项3',
			          label: '珠海市'
			        }, {
			          value: '选项4',
			          label: '佛山市'
			        }],
			        city:'',
			        quartersTypes: [{
			          value: '选项1',
			          label: 'A型'
			        }, {
			          value: '选项2',
			          label: 'B型'
			        }, {
			          value: '选项3',
			          label: 'C型'
			        }, {
			          value: '选项4',
			          label: 'D型'
			        }],
			        quartersType:'',
			        buildingTypes: [{
			          value: '选项1',
			          label: 'A型'
			        }, {
			          value: '选项2',
			          label: 'B型'
			        }, {
			          value: '选项3',
			          label: 'C型'
			        }, {
			          value: '选项4',
			          label: 'D型'
			        }],
			        buildingType:'',
				}    
			}

		});
	</script>
</html>
